<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>人脸识别系统</title>
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/layui/css/layui.css">
<link rel="stylesheet" href="../static/js/zfes/sweetalert.css">

<style type="text/css">
.div-form-elm{
color:#FFFFFF;height: 50px;margin-top:20px;margin-left:20px;margin-right:20px;background-color: #5A5B5B;border-radius:5px;
}
.label-form-elm{
margin-left: 20px;height: 50px;line-height:50px;font-size: 21px;text-align: right;float: left;
}
.input-form-elm{
width:180px;margin-left: auto;height: 50px;font-size: 21px;background-color: #5A5B5B;color:#FFFFFF;border: thin;
}
.btn-form-elm{
color:#FFFFFF;height: 43px;margin-top:3px;width:125px;background-color: #3F51B5;border-radius:5px;text-align: center;line-height: 30px;font-size: 25px
}
</style>

</head>
<body>
<div class="layui-row">
    <div class="layui-col-xs7 layui-col-md-offset3">
        <div style="width: 1024px;height: 80px;background-color: #383939">
            <div style="margin-left: 100px;height: 80px;text-align:left;line-height:80px;font-size: 40px;color: #E51C23">
               人脸识别系统
            </div>
        </div>
        <div style="width: 1024px;height: 80px;background-color: #101010">
            <div style="display:inline;margin-left: 20px;height: 80px;text-align:left;line-height:80px;font-size: 25px;color:red">
              	提示信息： <span class="err" id="errorMessage" style="font-size: 20px;">系统资源加载中.....</span>
            </div>
        </div>

 <div class="layui-row"  style="background-color: #383939;width: 1024px;" >
 
    <div class="layui-col-xs8 layui-col-sm8 layui-col-md8" style="border-color: red">
   		 <video id="videoInput" width=600px height=600px; ></video><br/>
   		 <canvas id="canvasOutput" width=600px height=600px; style="display: none" ></canvas>
       </div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
 			 <div style="color: #FFFFFF;font-size: 30px;margin-left: 50px;margin-top: 29px;text-align: left">
                  		  身份信息
                </div>
                <form class="form-horizontal form" role="from" id="acq_form"  enctype="multipart/form-data">

                    <div class="div-form-elm" >
                        <label class="label-form-elm">姓名：</label>
                        <input class="input-form-elm"  type="text" id="name" name="name" autocomplete="off">
                    </div>
                    
                      <div  class="div-form-elm">
                        <label class="label-form-elm">电话：</label>
                        <input class="input-form-elm"  type="text" id="phone"  name="phone" autocomplete="off">
                    </div>
                      <div  class="div-form-elm">
                        <label class="label-form-elm">邮箱：</label>
                        <input class="input-form-elm"    type="text"  id="email" name="email"  autocomplete="off">
                    </div>

					<div  class="div-form-elm">
                        <label  class="label-form-elm">性别：</label>
                        <select name="gender"   id="gender"  class="input-form-elm" >
                        <option value="1" >&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;男&nbsp; &nbsp;</option>
                        <option  value="2" >&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;女&nbsp; &nbsp;</option>
                        <option  value="0" >&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;未知&nbsp; &nbsp;</option>
                        </select>
                    </div>

  					<div  class="div-form-elm">
                        <label class="label-form-elm">年龄：</label>
                        <input class="input-form-elm"  id="age" type="number" name="age">
                    </div>
                    
                    <div  class="div-form-elm">
                        <label  class="label-form-elm">相似度：</label>
                        <input  class="input-form-elm"   id="similarScore" type="text" name="similarScore">
                    </div>
                    
                    <div class="div-form-elm">
                        <button type="button"  id="startAndStop" disabled="disabled" style="background-color: #B0B0B0l;display: none;" class="btn-form-elm">开始</button>
                   	    <button type="button" class="btn-form-elm" onclick="resumeDetectFace();">恢复检测 </button>
                   	    <button type="button" class="btn-form-elm"  onclick="window.location.reload();">刷新 </button>
                    </div>
                    
                </form>
    </div>
    
  </div>

</div>

</div>
    <script src="../static/jquery/jquery.2.2.4.min.js"></script>
    <script src="../static/bootstrap/js/bootstrap.min.js"></script>
    <script src="../static/layui/layui.js"></script>
    <script src="../static/js/vue.min.js"></script>
    
   <script src="../static/opencv/utils.js"></script>
     <script src="../static/opencv/biz.js"></script>
   
       <script src="../static/js/zfes/zfes.util.js"></script>
    <script src="../static/js/zfes/sweetalert.min.js"></script>
    <script src="../static/js/zfes/zfes.core.js"></script>
    <script src="../static/js/zfes/zfes.alert.swal.js"></script>
    <script src="../static/js/zfes/zfes.ajax.js"></script>
    
<script>

//var utils = new Utils('errorMessage');
var opencvBiz=new opencvBiz();
opencvBiz.initAndStart(function(){
	alert("initAndStart1")
},function(){
	alert("initAndStart2")
});

function callbackz(res){
	if(res.statusCode!=200){
		alertSwal.warningText("对比完成，人脸检测失败，原因："+res.message);
		return ;
	}
	if(res.data.resList.length==0){
		alertSwal.warningText("对比完成，未查询到数据");
		return ;
	}
	var userFaceInfo=res.data.resList[0].userFaceInfo;
	var similarScore=res.data.resList[0].similarScore;
	$("#name").val(userFaceInfo.name);
	$("#phone").val(userFaceInfo.phone);
	$("#email").val(userFaceInfo.email);
	$("#age").val(userFaceInfo.age);
	$("#similarScore").val(similarScore);
	alertSwal.successText("图像匹配成功");
	
}	
	
function onDetectedFace(imgdata){
	video.style.display="none";
	canvasOutput.style.display="";
	detectedFaceAndPause=true;
	utils.printError('检测到人脸，后台比对中....');
}

startAndStop.addEventListener('click', () => {
	if(!streaming) {
		setButnEnable();
		utils.clearError();
		utils.startCamera('vga', onVideoStarted, 'videoInput');
	} else {
		setButnDiable();
		utils.stopCamera();
		onVideoStopped();
	}
});




function setButnEnable() {
	startAndStop.value='停止';
	startAndStop.removeAttribute('disabled','');
	startAndStop.style.backgroundColor="#3F51B5";
}
function setButnDiable(){
	startAndStop.setAttribute('disabled','disabled');
	startAndStop.value='开始';
	startAndStop.style.backgroundColor="#B0B0B0";
}

</script>
</body>
</html>